<template>
	<view v-if="Object.keys(orderDetail).length" class="box">
		</u-navbar>
		<view class="address">
			<view class="left">
				<u-icon name="map-fill" color="#a9a9a9" size="28"></u-icon>
			</view>
			<view class="conter">
				<view class="title twoline-hide">
					{{`${orderDetail.province}${orderDetail.city}${orderDetail.district}${orderDetail.address}`}}
				</view>
				<view class="vtitle">
					<view class="name">
						{{orderDetail.consignee || ''}}
					</view>
					<view class="phone">
						{{orderDetail.orderinfo.mobile || ''}}
					</view>
				</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#a9a9a9" size="28"></u-icon>
			</view>
		</view>

		<view class="order-list">
			<view class="title-t">
				订单内容
			</view>
			<view class="li" v-for="item in orderDetail.goodslist" :key="item.goods_id">
				<view class="n-pic">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="price">
						￥{{item.goods_price}}
					</view>
				</view>
				<view class="vtitles">
					<view class="">
						{{item.goods_remark}}
					</view>
					<view class="">
						x{{item.goods_num}}
					</view>
				</view>
				<view class="bottom">
					<view v-if="false" class="btn">
						预览
					</view>
				</view>
			</view>

			<view class="cancel">
				<view v-if="orderDetail.orderinfo.type === 1" class="cancel-btn" @click.stop="cancelOrder(orderId)">
					取消订单
				</view>
				<view v-if="orderDetail.orderinfo.type === 2" class="cancel-btn" @click.stop="showAfterSale = true">
					申请售后
				</view>
			</view>
		</view>

		<view class="order-info">
			<view class="title-t">
				订单详情
			</view>
			<view class="info">
				<view class="left">文件金额</view>
				<view class="right">￥{{fileTotalPrice}}</view>
			</view>
			<view class="info">
				<view class="left">邮费</view>
				<view class="right">￥{{orderDetail.orderinfo.shipping_price}}</view>
			</view>
			<view class="info">
				<view class="left">优惠券</view>
				<view class="right" style=" color: #ff9844;">{{`-￥${orderDetail.orderinfo.voucher_price}` || '无可用优惠'}}</view>
			</view>
			<view class="info">
				<view class="left">快递方式</view>
				<view class="right">{{orderDetail.orderinfo.shipping_name ? '￥' + orderDetail.orderinfo.shipping_name : '暂无快递'}}
				</view>
			</view>
			<view class="info">
				<view class="left">实付金额</view>
				<view class="right" style=" color: #ff9844;">￥{{orderDetail.order_amount}}</view>
			</view>
			<view class="info">
				<view class="left">订单时间</view>
				<view class="right" style=" color: #767676;">{{orderDetail.add_time}}</view>
			</view>
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right" style=" color: #767676;">{{orderDetail.order_sn}}</view>
			</view>
		</view>

		<view v-if="orderDetail.orderinfo.type === 1" class="sub-box">
			<view class="submit">
				<view class="l">
					合计：
				</view>
				<view class="c">
					<view class="pic">
						￥
					</view>
					<view class="price">
						{{orderDetail.total_amount}}
					</view>
				</view>
				<view class="r" @click.stop="handlePayment(orderId)">
					立即支付
				</view>
			</view>
		</view>

		<view v-if="orderDetail.orderinfo.type === 3" class="sub-box">
			<view class="submit">
				<view class="r" @click.stop="confirmReceipt(orderId)">
					确认收货
				</view>
			</view>
		</view>

		<view v-if="orderDetail.orderinfo.type === 4" class="sub-box">
			<view class="submit">
				<view class="r" @click.stop="handleEvaluate(orderId)">
					立即评价
				</view>
			</view>
		</view>

		<AfterSalePopup v-model="showAfterSale"
			:goods-info="Object.assign(orderDetail.goodslist[0], orderDetail.orderinfo)" />
	</view>
</template>

<script>
	import AfterSalePopup from '@/pages/mines/components/AfterSalePopup.vue'
	import {
		OrderApi
	} from '@/api';
	const OrderType = [{
		name: '全部',
		id: 0
	}, {
		name: '待支付',
		id: 1
	}, {
		name: '待打印',
		id: 2
	}, {
		name: '待收货',
		id: 3
	}, {
		name: '已完成',
		id: 4
	}, {
		name: '已取消',
		id: 5
	}, ]
	export default {
		components: {
			AfterSalePopup
		},
		data() {
			return {
				orderId: 0,
				// 顶部导航栏
				navTitle: '订单详情',
				// 订单详情
				orderDetail: {},
				// 展示售后
				showAfterSale: false
			};
		},
		computed: {
			fileTotalPrice() {
				if (!this.orderDetail?.goodslist?.length)
					return 0
				return this.orderDetail.goodslist.reduce((acc, cur) => {
					return acc + cur.goods_num * cur.goods_price
				}, 0)
			}
		},
		onLoad(option) {
			this.orderId = Number(option.orderId)
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				OrderApi.UserOrderInfo({
						order_id: this.orderId
					})
					.then(res => {
						this.orderDetail = res
						// 设置标题
						const navType = OrderType.find(item => item.id === this.orderDetail.orderinfo.type).name
						if (!navType)
							return
						uni.setNavigationBarTitle({
							title: navType
						})
					})
					.catch(err => {
						this.$showToast(err || '获取订单详情失败')
					})
			},

			// *********************** 操作按钮-开始

			// 确认收货
			confirmReceipt(orderId) {
				uni.showModal({
					title: '是否确定商品无损坏',
					success: (res) => {
						if (!res.confirm)
							return
						OrderApi.UserOrderAffirm({
								order_id: orderId
							})
							.then((res1) => {
								this.$showToast(res1.msg)
								this.getDataList(true)
							})
							.catch(err => this.$showToast(err))
					}
				})
			},
			// 去支付 
			async handlePayment(orderId) {
				try {
					const payInfoRes = await OrderApi.MiniPayOrder({
						order_id: orderId,
						openid: this.$store.getters['token']
					})
					const res = await toPromise(uni.requestPayment, {
						provider: 'wxpay',
						...payInfoRes.payinfo,
					})
					uni.hideLoading()
					this.$showToast('支付成功')
					this.getDataList(true)
				} catch (err) {
					console.log('handlePayment=', err);
					this.$showToast(err || '支付失败')
				}
			},
			// 取消订单
			cancelOrder(orderId) {
				uni.showModal({
					title: '是否确定取消该订单',
					success: (res) => {
						if (!res.confirm)
							return
						OrderApi.AllOrderOut({
								order_id: orderId
							})
							.then(res => {
								this.$showToast(res.msg || '已取消订单')
								this.getDataList(true)
							})
							.catch(err => {
								this.$showToast(err || '取消订单失败')
							})
					}
				})
			},
			// 立即评价
			handleEvaluate() {
				if (this.orderDetail.goodslist.length > 1) {
					this.$navTo('pages/mines/evaluation/list', {
						orderId: this.orderId
					})
				} else {
					this.$navTo('pages/mines/evaluation/submit', {
						orderId: this.orderId,
						goodsId: this.orderDetail.goodslist
					})
				}
			},
			/** 
			 * 打开售后弹出框
			 * @param {Object} goods 商品信息
			 * @param {Boolean} show 是否展示
			 */
			handleShowAfterSales(goods, show = true) {
				this.returnGoods = goods
				this.showAfterSales = show
			},

			// *********************** 操作按钮-结束
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.sub-box {
			width: 100vw;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #ffffff;
			padding-bottom: $safe-btm-env;

			.submit {
				width: 100%;
				height: 112rpx;
				opacity: 1;
				// border: 2rpx solid #f4f4f4;

				box-sizing: border-box;
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.r {
					width: 228rpx;
					height: 70rpx;
					border-radius: 35rpx;
					opacity: 1;
					background: linear-gradient(135deg, #ffb300 4%, #ff6a00 100%);
					color: #ffffff;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 70rpx;
				}

				.l {
					color: #b5b5b5;
					font-size: 20rpx;
					font-weight: 400;
				}

				.c {
					display: flex;
					align-items: center;
					color: #ff7300;
					margin-right: 20rpx;

					.pic {
						font-size: 24rpx;
					}

					.price {
						font-size: 36rpx;
					}
				}
			}

		}


		.order-info {
			margin-top: 20rpx;
			width: 710rpx;
			border-radius: 10rpx;
			opacity: 1;
			background: #ffffff;
			box-shadow: 0 16rpx 40rpx 0 #00000008;
			box-sizing: border-box;
			padding: 30rpx;

			.info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 20rpx;

				.left {
					color: #767676;
				}

				.right {}
			}

		}

		.title-t {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			border-bottom: 2rpx solid #f3f3f3;
		}

		.order-list {
			width: 710rpx;
			// height: 610rpx;
			border-radius: 10rpx;
			opacity: 1;
			background: #ffffff;
			box-shadow: 0 16rpx 40rpx 0 #00000008;
			box-sizing: border-box;
			padding: 30rpx;

			.cancel {
				margin-top: 30rpx;
				width: 100%;
				display: flex;
				justify-content: flex-end;

				.cancel-btn {
					width: 156rpx;
					height: 54rpx;
					border-radius: 10rpx;
					opacity: 1;
					border: 2rpx solid #bcbcbc;
					background: #ffffff;
					color: #898989;
					font-size: 24rpx;
					text-align: center;
					line-height: 54rpx;
				}
			}

			.li {
				padding: 30rpx 0 30rpx;
				border-bottom: 2rpx solid #f3f3f3;

				.n-pic {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.vtitles {
					color: #989898;
					width: 100%;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;
				}

				.bottom {
					display: flex;
					justify-content: flex-end;

					.btn {
						width: 108rpx;
						height: 46rpx;
						border-radius: 10rpx;
						opacity: 1;
						border: 2rpx solid #ff9844;
						background: #ffffff;
						text-align: center;
						line-height: 46rpx;
						color: #ff9844;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
		}

		.address {
			width: 710rpx;
			height: 194rpx;
			border-radius: 10rpx;
			opacity: 1;
			background: #ffffff;
			box-shadow: 0 16rpx 40rpx 0 #00000008;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			align-items: center;

			.conter {
				margin: 0 20rpx;
				flex: 1;

				.title {
					font-size: 28rpx;
					font-weight: 400;
				}

				.vtitle {
					color: #a5a5a5;
					text-align: left;
					font-size: 24rpx;
					font-weight: 400;
					display: flex;

					.name {
						margin-right: 10rpx;
					}

				}
			}


		}
	}
</style>